<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>开始使用layui</title>
    <link rel="stylesheet" href="/static/layui/css/layui.css"/>
    <script src="/static/layui/layui.js"></script>
</head>
<body>

<!-- 如下script可以定义在页面的任何位置 -->
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<table id="demo" lay-filter="test"></table>
<!-- 添加和修改的弹出层开始 -->
<div style="display: none;padding: 20px" id="saveOrUpdateDiv">
    <form class="layui-form" lay-filter="dataFrm" id="dataFrm">
        <div class="layui-form-item">
            <label class="layui-form-label">名称:</label>
            <div class="layui-input-block">
                <input type="hidden" name="id">
                <input type="text" name="username" placeholder="请输入角色名称" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">性别:</label>
            <div class="layui-input-block">
                <input type="text" name="sex" placeholder="请输入性别" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">城市:</label>
            <div class="layui-input-block">
                <input type="text" name="city" placeholder="请输入城市" autocomplete="off"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">城市:</label>
            <div class="layui-input-block">
                <input type="text" name="score" placeholder="请输入成绩" autocomplete="off"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item" style="text-align: center;">
            <div class="layui-input-block">
                <button type="button" class="layui-btn layui-btn-normal layui-btn-sm layui-icon layui-icon-release"
                        lay-filter="doSubmit" lay-submit="">提交
                </button>
                <button type="reset" class="layui-btn layui-btn-warm layui-btn-sm layui-icon layui-icon-refresh">重置
                </button>
            </div>
        </div>
    </form>

</div>
<script>
    // 必须要导入 table模块 layui.use('table',...)
    layui.use(['table','jquery','form'], function(){
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;
        // 为表格填充数据
        table.render({
            elem: '#demo'
            ,height: 312,
            page:true
            //获取数据
            ,url: 'data.json',
            cols: [[ //表头
                {field:'id', width:80, title: 'ID', sort: true}
                ,{field:'username', width:80, title: '用户名'}
                ,{field:'sex', width:80, title: '性别', sort: true}
                ,{field:'city',  title: '城市'} //没定义宽度则占满剩余所有宽度，都不定义则所有列均分
                ,{field:'score',width:80, title: '评分', sort: true}
                ,{field:"right",title:"操作",toolbar: '#barDemo'}
            ]]
        });

        var url;
        //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
        table.on('tool(test)', function(obj){
            var data = obj.data; //获得当前行数据
            //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
            var layEvent = obj.event;
            var tr = obj.tr; //获得当前行 tr 的 DOM 对象（如果有的话）
            if(layEvent === 'del'){ //删除
                layer.confirm('真的删除行么', function(index){
                    // 向服务端发送删除请求
                    // 此处可以发送ajax
                    obj.del(); //删除对应行（tr）的DOM结构
                    layer.close(index);
                });
            } else if(layEvent === 'edit'){ //编辑
                // 向服务端发送更新请求
                var mainIndex = layer.open({
                    type: 1,
                    title: '修改用户',
                    content: $("#saveOrUpdateDiv"),
                    area: ['800px', '300px'],
                    success: function (index) {
                        form.val("dataFrm", data);
                        url = "role/updateRole";
                    }
                });
                // 同步更新缓存对应的值
                obj.update({
                    username: 'shine001',
                    city: '北京',
                    sex:'女',
                    score:99});
            }
        });

        //保存
        form.on("submit(doSubmit)", function (obj) {
            //序列化表单数据
            var params = $("#dataFrm").serialize();
            console.log(params);
            $.post(url, params, function (obj) {
                layer.msg(obj);
                //关闭弹出层
                layer.close(mainIndex)
                //刷新数据 表格
                tableIns.reload();
            })
        });

        //监听头部工具栏事件
        table.on("toolbar(test)", function (obj) {
            switch (obj.event) {
                case 'add':
                    openAddRole();
                    break;
            }
            ;
        })

        //打开添加页面
        function openAddRole() {
            mainIndex = layer.open({
                type: 1,
                title: '添加角色',
                content: $("#saveOrUpdateDiv"),
                area: ['800px', '300px'],
                success: function (index) {
                    //清空表单数据
                    $("#dataFrm")[0].reset();
                    url = "role/insertRole";
                }
            });
        }


    });
</script>

</body>
</html>